<template>
  <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="用户注册"
  />
  <a-steps
      progress-dot
      :current="stepCurrent"
      size="small"
      style="margin-top: 30px; margin-left: 240px; width: 1000px"
  >
    <a-step title="用户注册信息"/>
    <a-step title="完善邮箱验证"/>
    <a-step title="注册完成"/>
  </a-steps>
  <div>
    <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item
          label="邮箱"
          has-feedback
          :validateStatus="type1"
          :help="message1"
      >
        <a-input
            v-model:value="user.email"
            placeholder="请输入用户邮箱"
            @change="checkEmail"
        />
      </a-form-item>
      <a-form-item
          label="验证码"
          has-feedback
          :validate-status="type2"
          :help="message2"
      >
        <a-input
            v-model:value="user.code"
            @change="checkCode"
            placeholder="请输入6位验证码"
        />
      </a-form-item>
    </a-form>
  </div>

  <a-button
      style="margin-left: 400px"
      id="mailButton"
      :disabled="buttonStatus1"
      @click="sendmail();f()"
  >点击发送验证码
  </a-button>
  <a-button
      :disabled="buttonStatus2"
      style="margin-left: 230px"
      @click="registerOk"
  >完成注册
  </a-button
  >
</template>
<script setup>
///////////////////////////////////////////////////////////引入
import {reactive, ref} from "vue";
import {post, setLocalToken} from "@/common";
import {useRouter} from "vue-router";
import {get} from "@/common";
import {message} from "ant-design-vue";
////////////////////////////////////////////////////////////变量
const user = reactive({
  user_id: "",
  code: "",
  email: "",
});
const type1 = ref("");
const message1 = ref("");

const type2 = ref("");
const message2 = ref("");

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 14,
};

const buttonStatus2 = ref(true);
const buttonStatus1 = ref(true);

const stepCurrent = ref(1);

const router = useRouter();

var wait = 60;
/////////////////////////////////////////////////////////////
const f = () => {
  time(document.getElementById("mailButton"));
}

const time = (obj) => {
  if (wait === 0) {
    obj.removeAttribute("disabled");
    obj.innerHTML = "获取验证码";
    wait = 60;
  } else {
    obj.setAttribute("disabled", true);
    obj.innerHTML = wait + "秒后重新发送";
    wait--;
    setTimeout(function () {
          time(obj)
        },
        1000)
  }
}

const getId = () => {
  user.user_id = localStorage.getItem("user_id");
}

getId();


const checkEmail = () => {
  if (user.email.indexOf("@") != -1 && (user.email.indexOf(".com") != -1 || user.email.indexOf(".cn") != -1)) {
    type1.value = "success";
    message1.value = "";
    buttonStatus1.value = false;
  } else {
    type1.value = "error";
    message1.value = "请输入正确的邮箱";
    buttonStatus1.value = true;
  }
};

const checkCode = () => {
  if (user.code.length == 6) {
    type2.value = "success";
    message2.value = "";
    buttonStatus2.value = false;
  } else {
    type2.value = "error";
    message2.value = "请输入长度正确的验证码";
    buttonStatus2.value = true;
  }
}

const sendmail = () => {
  post("/security/mailFill/sendMail", user).then((res) => {
    if (res.success) {
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  })
}

const registerOk = () => {
  post("/security/mailFill/verifyCode", user).then((res) => {
    if (res.success) {
      message.success(res.message);
      router.push({path: '/'})
    } else {
      message.error(res.message);
    }
  })
}
</script>

<style>

</style>